<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:t="http://myfaces.apache.org/tomahawk"
      xmlns:mias="http://www.monsters.inc/mias">
<body>

<ui:composition template="templates/template.xhtml">
  <!--
       This page lists all kids. 
  -->
  <ui:define name="title">Overview of kids</ui:define>
  <ui:define name="content"> 
    <h:form>
      <t:dataTable var="kid" value="#{kidsList.kids}" rows="20" id="kids" 
                   styleClass="tDataTable"
                   rowClasses="rowOdd,rowEven"
                   columnClasses="textColumn,textColumn,numberColumn,numberColumn,numberColumn"
                   varDetailToggler="detailToggler">
        <mias:column columnName="firstName" bean="#{kid}" />
        <mias:column columnName="lastName" bean="#{kid}" sortable="true" />
        <mias:column columnName="age" bean="#{kid}" sortable="true" />
        <mias:column columnName="lastScared" bean="#{kid}" sortable="true" />
        <mias:column columnName="braveness" bean="#{kid}" sortable="true">
          <f:convertNumber minFractionDigits="1" maxFractionDigits="1" 
                           minIntegerDigits="1" maxIntegerDigits="2" />
        </mias:column>
        <mias:column columnName="details" custom="true">
          <h:commandLink action="#{detailToggler.toggleDetail}">
            <h:outputText value="#{detailToggler.currentDetailExpanded ? msg.hide : msg.show}"/>
          </h:commandLink>
        </mias:column>
        <f:facet name="detailStamp">
          <h:panelGrid columns="4">
            <mias:field id="birthDate" bean="#{kid}" readOnly="true">
              <f:convertDateTime pattern="#{msg.datePattern}" />
            </mias:field>
            <mias:field id="country" bean="#{kid}" readOnly="true"/>
          </h:panelGrid>
        </f:facet>
        <mias:column columnName="edit" headerName="emptyTableHeader" custom="true">
          <t:commandLink action="edit" immediate="true">
            <t:graphicImage value="../images/pencil.png" border="0" />
            <t:updateActionListener property="#{editKidForm.selectedKid}" value="#{kid}"/>
          </t:commandLink>
        </mias:column>    
      </t:dataTable>
      <t:dataScroller id="scroller" for="kids" fastStep="10"
                      pageCountVar="pageCount" pageIndexVar="pageIndex"
                      paginator="true" paginatorMaxPages="9" styleClass="tDataScroller"
                      paginatorActiveColumnClass="current">
        <f:facet name="first"><t:graphicImage url="../images/start.png" border="0"/></f:facet>
        <f:facet name="last"><t:graphicImage url="../images/end.png" border="0" /></f:facet>
        <f:facet name="previous"><t:graphicImage url="../images/back.png" border="0" /></f:facet>
        <f:facet name="next"><t:graphicImage url="../images/forward.png" border="0" /></f:facet>
        <f:facet name="fastforward"><t:graphicImage url="../images/fastforward.png" border="0" /></f:facet>
        <f:facet name="fastrewind"><t:graphicImage url="../images/fastbackward.png" border="0" /></f:facet>
      </t:dataScroller>
    </h:form>
  </ui:define>
</ui:composition>

</body>
</html>